<template>
  <view>
    <view class="top">
      <image src="/static/new/xd_logo.png"></image>
      <view class="info">
        <text class="name">{{ name }}</text>
        <text class="tel">电话：{{ tel }}</text>
      </view>
      <view class="quitLogin" @click="dialog = true"> 退出登录 </view>
    </view>
    <view class="orderRegion">
      <view class="title">
        <text>订单列表</text>
        <text @click="clickOrder('ALL')">全部订单 </text>
      </view>
      <view class="orderType">
        <view class="item">
          <view @click="clickNav('bill')">
            <image src="./static/ts.png"></image>
            <text>暂存单</text>
          </view>
        </view>
        <view class="item">
          <view @click="clickOrder('WAIT_SHIP')">
            <image src="./static/notoutbound.png"></image>
            <text>未出库</text>
          </view>
        </view>
        <view class="item">
          <view @click="clickOrder('WAIT_ROG')">
            <image src="./static/outbound.png"></image>
            <text>已出库</text>
          </view>
        </view>
        <view class="item">
          <view @click="clickOrder('COMPLETE')">
            <image src="./static/completed.png"></image>
            <text>已完成</text>
          </view>
        </view>
        <view class="item">
          <view @click="changePassword">
            <image src="./static/password.png"></image>
            <text>改密码</text>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="my" @click="clickNav('my')">
        <image src="./static/my_.png"></image>
        <!-- <image v-else src="./static/my.png"></image> -->
        <!-- :class="navTag === 'my' ? 'textColor' : ''" -->
        <text class="textColor">我的</text>
      </view>
      <!-- <view class="bill" @click="clickNav('bill')"> </view> -->
      <view class="client" @click="clickNav('client')">
        <image src="./static/client.png"></image>
        <!-- <image v-else src="./static/client.png"></image> -->
        <text>下单</text>
      </view>
    </view>
    <Dialog :dialog="dialog" :content="'确认退出当前账号吗？'" @cancel="dialog = false" @confirm="confirm">
    </Dialog>
  </view>
</template>

<script>
import jwtDecode from 'jwt-decode'
import Dialog from '@/components/dialog'

export default {
  components: {
    Dialog
  },
  data () {
    return {
      dialog: false,
      navTag: 'my',
      name: '',
      tel: ''
    }
  },
  onUnload () {
    this.$isResolve()
  },
  onLoad () {
    if (this.hasToken()) {
      let a = JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext.replace('\\', ''))
      this.name = a.name
      this.tel = a.username
    }
  },
  onShow () {
    this.navTag = 'my'
  },
  methods: {
    changePassword () {
      uni.navigateTo({ url: '/pages_user/setting/changPassword?title=业务员' })
    },
    confirm () {
      uni.clearStorageSync()
      uni.reLaunch({ url: '/pages_user/reg/index' })
    },
    clickOrder (e) {
      uni.navigateTo({ url: '/invoicer/orderList?tag=' + e })
    },
    clickNav (e) {
      uni.navigateTo({ url: '/invoicer/search?type=' + e })
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  height: 184rpx;
  background: #fff;
  display: flex;
  align-items: center;
  padding-bottom: 38rpx;
  position: relative;

  image {
    width: 148.61rpx;
    height: 148.61rpx;
    margin-left: 25rpx;
    margin-right: 29.17rpx;
  }

  .info {
    display: flex;
    flex-flow: column wrap;
    max-width: 40%;
  }

  .name {
    font-size: 42rpx;
    line-height: 33rpx;
  }

  .tel {
    font-size: 25rpx;
    color: #585858;
    margin-top: 13rpx;
    line-height: 33rpx;
  }

  .quitLogin {
    position: absolute;
    right: 100rpx;
    font-size: 30rpx;
  }
}

.orderRegion {
  margin: 20.83rpx 25rpx 0;
  background: #fff;
  border-radius: 10rpx;

  .title {
    padding: 41.67rpx 25rpx 0 22.22rpx;
    display: flex;
    justify-content: space-between;

    text:nth-child(1) {
      font-size: 29rpx;
    }

    text:nth-child(2) {
      font-size: 25rpx;
      color: #585858;
    }

    text:nth-child(2)::after {
      content: " >";
    }
  }

  .orderType {
    padding: 34rpx 25rpx 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .item {
      // width: 151rpx;
      margin-bottom: 36rpx;

      view {
        width: 82rpx;
        display: flex;
        flex-flow: column nowrap;
      }

      image {
        width: 82rpx;
        height: 82rpx;
      }

      text {
        text-align: center;
        font-size: 24rpx;
        line-height: 33rpx;
        margin-top: 9.72rpx;
      }
    }
  }
}

.bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 106rpx;
  background: #fff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 38rpx;

  .bill {
    width: 101.74rpx;
    height: 101.74rpx;
    border-radius: 50%;
    background: #2871fc;
    position: relative;
    top: -20rpx;
  }

  .bill::after,
  .bill::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 11rpx;
    background: #fff;
  }

  .bill::after {
    width: 39rpx;
    height: 4rpx;
  }

  .bill::before {
    width: 4rpx;
    height: 39rpx;
  }

  .my {
    margin-left: 150rpx;
  }

  .client {
    margin-right: 150rpx;
  }

  .my,
  .bills,
  .client {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    image {
      width: 41.67rpx;
      height: 41.67rpx;
    }

    text {
      font-size: 21rpx;
      line-height: 34rpx;
    }
  }

  .textColor {
    color: #2871fc;
  }
}
</style>
